<template>
  <div id="bodgset">
      <fieldset class="pgameInp">
      <legend>胜负倍率设置</legend>
      <div  style="display:flex;flex-wrap:wrap;">
        <el-form style="margin-left:15px;" :label-position="labelPosition" :rules="rules" ref="formInline" :model="formInline[0]" label-width="100px" class="selectCard">
          <el-form-item label-width="55px" label="红方赢 :"  prop="rate">
            <div class="inpBeside">
              <el-input  class="widthInput" v-model="formInline[0].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
        <el-form style="margin-left:45px;" :label-position="labelPosition" :rules="ruletwo" ref="formInline" :model="formInline[1]" label-width="100px" class="selectCard">
          <el-form-item label-width="45px" label="平局 :"  prop="rate">
            <div class="inpBeside">
              <el-input  class="widthInput" v-model="formInline[1].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
        <el-form style="margin-left:45px;" :label-position="labelPosition" :rules="rulethree" ref="formInline" :model="formInline[2]" label-width="100px" class="selectCard">
          <el-form-item label-width="55px" label="蓝方赢 :"  prop="rate">
            <div class="inpBeside">
              <el-input  class="widthInput" v-model="formInline[2].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </fieldset>
    <fieldset class="pgameInp">
      <legend>任一方手牌牌型倍率设置</legend>
      <div  style="display:flex;flex-wrap:wrap;">
        <el-form style="margin-left:15px;" :label-position="labelPosition" :rules="rulefour" ref="formInline" :model="formInline[3]" label-width="100px" class="selectCard">
          <el-form-item label-width="45px"  label="同花 :"  prop="rate">
            <div class="inpBeside">
              <el-input class="widthInput" v-model="formInline[3].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
        <el-form style="margin-left:45px;" :label-position="labelPosition" :rules="rulefive" ref="formInline" :model="formInline[4]" label-width="100px" class="selectCard">
          <el-form-item label-width="45px" label="连牌 :"  prop="rate">
            <div class="inpBeside">
              <el-input class="widthInput" v-model="formInline[4].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
        <el-form style="margin-left:45px;" :label-position="labelPosition" :rules="rulesix" ref="formInline" :model="formInline[5]" label-width="100px" class="selectCard">
          <el-form-item label-width="45px" label="对子 :"  prop="rate">
            <div class="inpBeside">
              <el-input class="widthInput" v-model="formInline[5].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
        <el-form style="margin-left:45px;" :label-position="labelPosition" :rules="rulesevent" ref="formInline" :model="formInline[6]" label-width="100px" class="selectCard">
          <el-form-item label-width="68px" label="同花连牌 :"  prop="rate">
            <div class="inpBeside">
              <el-input class="widthInput" v-model="formInline[6].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
        <el-form style="margin-left:45px;" :label-position="labelPosition" :rules="ruleeight" ref="formInline" :model="formInline[7]" label-width="100px" class="selectCard">
          <el-form-item label-width="45px" label="对A :"  prop="rate">
            <div class="inpBeside">
              <el-input class="widthInput" v-model="formInline[7].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </fieldset>
    <fieldset class="pgameInp">
      <legend>最大牌型倍率设置</legend>
      <div  style="display:flex;flex-wrap:wrap;">
        <el-form style="margin-left:15px;" :label-position="labelPosition" :rules="rulenine" ref="formInline" :model="formInline[8]" label-width="100px" class="selectCard">
          <el-form-item label-width="75px" label="高排/一对 :"  prop="rate">
            <div class="inpBeside">
              <el-input  class="widthInput" v-model="formInline[8].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
        <el-form style="margin-left:45px;" :label-position="labelPosition" :rules="ruleten" ref="formInline" :model="formInline[9]" label-width="100px" class="selectCard">
          <el-form-item label-width="45px" label="两对 :"  prop="rate">
            <div class="inpBeside">
              <el-input  class="widthInput" v-model="formInline[9].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
        <el-form style="margin-left:45px;" :label-position="labelPosition" :rules="ruleeleven" ref="formInline" :model="formInline[10]" label-width="100px" class="selectCard">
          <el-form-item  label="三条/顺子/同花 :" label-width="110px"  prop="rate">
            <div class="inpBeside">
              <el-input  class="widthInput" v-model="formInline[10].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
        <el-form style="margin-left:45px;" :label-position="labelPosition" :rules="ruletwelve" ref="formInline" :model="formInline[11]" label-width="100px" class="selectCard">
          <el-form-item label-width="45px" label="葫芦 :"  prop="rate">
            <div class="inpBeside">
              <el-input  class="widthInput" v-model="formInline[11].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
        <el-form style="margin-left:45px;" :label-position="labelPosition" :rules="rulethirteen" ref="formInline" :model="formInline[12]" label-width="100px" class="selectCard">
          <el-form-item  label="金刚/同花顺/皇家 :" label-width="120px" prop="rate">
            <div class="inpBeside">
              <el-input  class="widthInput" v-model="formInline[12].rate" placeholder="请输入..."></el-input>
              <label for="">倍</label>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </fieldset>
    <p class="pStyle">PS：房间概率修改将在之后的游戏中生效</p>
    <div class="btnCen">
      <el-button @click="cancelGameMessage">取 消</el-button>
      <el-button type="primary" @click="saveGameMessage">保 存</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    data(){
      var check1 = (rule, value, callback) => {
        var value = value.toString()
        if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
            if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check2 = (rule, value, callback) => {
        var value = value.toString()
        if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
            if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check3 = (rule, value, callback) => {
        var value = value.toString()
        if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
             if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check4 = (rule, value, callback) => {
        var value = value.toString()
        if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
             if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check5 = (rule, value, callback) => {
        var value = value.toString()
        if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
            if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check6 = (rule, value, callback) => {
        var value = value.toString()
         if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
            if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check7 = (rule, value, callback) => {
       var value = value.toString()
       if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
             if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check8 = (rule, value, callback) => {
        var value = value.toString()
           if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
            if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check9 = (rule, value, callback) => {
        var value = value.toString()
        if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
             if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check10 = (rule, value, callback) => {
        var value = value.toString()
           if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
             if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check11 = (rule, value, callback) => {
        var value = value.toString()
          if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
             if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check12 = (rule, value, callback) => {
        var value = value.toString()
          if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
             if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      var check13 = (rule, value, callback) => {
        var value = value.toString()
           if (!value&&value!=0) {
          return callback(new Error('输入不能为空'));
        }
        setTimeout(() => {
          if (!Number(value)&&value!=0) {
            // if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          }
          else if(value > 1000||value<0) {
            callback(new Error('输入范围必须在0~1000之间'));
          }
          else {
             if (value.indexOf('.')==-1) {
              callback();
            }
             else if(value.toString().trim().slice(0,value.indexOf('.')+3)!==value&&value!=1000) {
              callback(new Error('请输入至多两位小数点'));
            }
            else {
              callback();
            }
          }
        }, 100);
      };
      return {
        labelPosition: 'left',
         rules:{
          rate:[
            { validator:check1, trigger: 'blur' }
          ]
        },
        ruletwo:{
          rate:[
            { validator:check2, trigger: 'blur' }
          ]
        },
        rulethree:{
          rate:[
            { validator:check3, trigger: 'blur' }
          ]
        },
        rulefour:{
          rate:[
            { validator:check4, trigger: 'blur' }
          ]
        },
        rulefive:{
          rate:[
            { validator:check5, trigger: 'blur' }
          ]
        },
        rulesix:{
          rate:[
            { validator:check6, trigger: 'blur' }
          ]
        },
        rulesevent:{
          rate:[
            { validator:check7, trigger: 'blur' }
          ]
        },
        ruleeight:{
          rate:[
            { validator:check8, trigger: 'blur' }
          ]
        },
        rulenine:{
          rate:[
            { validator:check9, trigger: 'blur' }
          ]
        },
        ruleten:{
          rate:[
            { validator:check10, trigger: 'blur' }
          ]
        },
        ruleeleven:{
          rate:[
            { validator:check11, trigger: 'blur' }
          ]
        },
        ruletwelve:{
          rate:[
            { validator:check12, trigger: 'blur' }
          ]
        },
        rulethirteen:{
          rate:[
            { validator:check13, trigger: 'blur' }
          ]
        },
        checked:'',
        formInline:[
          {
            id:'',
            new:'',
            rate: '',
            type:''
          },
          {
            rate: ''
          },
          {
            rate: ''
          },
          {
            rate: ''
          },
          {
            rate: ''
          },
          {
            rate: ''
          },
          {
            rate: ''
          },
          {
            rate: ''
          },
          {
            rate: ''
          },
          {
            rate: ''
          },
          {
            rate: ''
          },
          {
            rate: ''
          },
          {
            rate: ''
          },
        ],
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
      }
    },
    created(){
      this.getGameStartMessage()
      $('.el-form-item__label').css({
        'width':'160px!important'
      })
    },
    methods:{
      // 取消保存
      cancelGameMessage(){
          this.getGameStartMessage()
          this.$alert('取消保存')
      },
      // 获取数据
      getGameStartMessage(){
        this.$api.getgameSetting(this.froms).then(res=>{
          if(res.code=='000000'){
            this.formInline = res.data;
          }
        })
      },
      // 保存数据
      saveGameMessage(){
        this.formInline.forEach((item)=>{
          this.$api.gameSettingSave(item).then(res => {
            if (res.code === '000000') {
              this.getGameStartMessage()

            }
          })
        })
        this.$alert('保存成功')
        this.$message.success('保存成功')
        this.getGameStartMessage()
      }
    }
  }
</script>
<style>
  #bodgset .el-form-item__label{
    padding:0;
  }
  #bodgset .widthInput{
    width:60px;
  }
  #bodgset{
    min-width:1100px;
    margin:10px 20px;
  }
  #bodgset .pgameInp{
    margin-top:15px;
    padding:15px 0;
    min-width:1000px;
  }
  #bodgset .pStyle{
    width:300px;
    margin:15px auto;
  }
  #bodgset .btnCen{
    width:170px;
    margin:-5px auto;
  }
  #bodgset .inpBeside{
    padding-right:10px;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
  }
  #bodgset .el-input__inner{
    width:60px;
    padding:0 0 0 10px;
    border: none;
  }
  #bodgset label{
    color:#606266;
  }
</style>
